

@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
  font-family: "Fira Code";
  src: url("/fonts/static/FiraCode-Regular.ttf") format("truetype");
}
html,
body {
  --color-primary: 206, 25%, 26%;
  --color-secondary: 207, 45%, 41%;
  --color-tertiary: 205, 20%, 19%;
  --color-quaternary: 11, 88%, 96%;
  --color-accent: 2, 83%, 43%;
  padding: 0;
  margin: 0;
  @apply bg-primary;
}
.modal > .header {
  @apply flex;
  @apply flex-row;
  @apply w-full;
  @apply mb-5;
}
.modal > .header > button {
  @apply text-quaternary;
}
.modal > .header > h1 {
  @apply text-xl;
  @apply text-quaternary;
  @apply text-left;
  @apply flex-grow;
}
.modal {
  @apply border;
  @apply bg-primary;
  @apply border-primary/90;
  @apply pt-5;
  @apply px-5;
  @apply rounded-2xl;
  @apply shadow-xl;
  @apply text-center;
  @apply w-full;
}
